<template>
  <div class="customPopCascade">
    <div class="cascade-title">{{ title }}</div>
    <div class="inputBox" :class="{ isBorder: isBorder }">
      <van-field v-model="inputText" label="" :placeholder="`请选择` + title" input-align="left" clickable readonly @click="cascaderShow = true" />
      <i class="iconfont down">&#xe656;</i>
    </div>
    <van-popup v-model="cascaderShow" position="bottom" get-container="body" class="cascader-popup">
      <span v-if="!mustLast" class="submit-button" @click="finish">确定</span>
      <van-cascader ref="cascader" v-model="cascaderValue" :closeable="mustLast" :title="cascaderTitle" :options="options" :field-names="fieldNames" @close="cascaderShow = false" @change="onChange" @finish="onFinish" />
      <van-button type="warning" class="w-100" @click="clearCascader">清空</van-button>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '废物类别'
    },
    list: {
      type: Array,
      default: () => []
    },
    isBorder: {
      type: Boolean,
      default: true
    },
    cascaderTitle: {
      type: String,
      default: '废物类别'
    },
    fieldNames: {
      type: Object,
      default: () => {
        return {
          text: 'text',
          value: 'value',
          children: 'children'
        }
      }
    },
    checkValue: {
      type: [Number, String],
      default: ''
    },
    mustLast: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputText: '',
      cascaderShow: false,
      cascaderValue: '',
      selectedOptions: [],
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }]
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }]
        }
      ]
    }
  },
  watch: {
    list(nv) {
      this.initCascader()
    },
    checkValue(nv) {
      this.initCascader()
    },
    cascaderShow() {
      if (!this.cascaderShow && this.mustLast) {
        this.cascaderValue = ''
      }
    }
  },
  mounted() {
    this.initCascader()
  },
  methods: {
    initCascader() {
      this.options = this.list
      // console.log('this.options', this.options)
      this.cascaderValue = this.checkValue
    },
    onChange({ value, selectedOptions, tabIndex }) {
      let text = ''
      selectedOptions.forEach((v, vi) => {
        if (vi === selectedOptions.length - 1) {
          text += `${v[this.fieldNames.text]}`
        } else {
          text += `${v[this.fieldNames.text]}/`
        }
      })
      if (this.mustLast) {
        if (tabIndex === 1) {
          this.inputText = text
        }
      } else {
        this.inputText = text
      }
      this.selectedOptions = selectedOptions
      this.$emit('change', { value, selectedOptions, tabIndex })
    },
    finish() {
      this.cascaderShow = false
      this.$emit('finish', this.selectedOptions)
    },
    onFinish({ selectedOptions }) {
      // console.log(selectedOptions)
      let text = ''
      selectedOptions.forEach((v, vi) => {
        if (vi === selectedOptions.length - 1) {
          text += `${v[this.fieldNames.text]}`
        } else {
          text += `${v[this.fieldNames.text]}/`
        }
      })
      this.inputText = text
      this.cascaderShow = false
      this.$emit('finish', selectedOptions)
    },
    clearCascader() {
      this.inputText = ''
      this.cascaderValue = ''
      this.cascaderShow = false
      this.$emit('clearData', '')
    }
  }
}
</script>

<style lang="scss">
.customPopCascade .inputBox .van-cell .van-field__control:read-only{
  color: #323233;
  // -webkit-text-fill-color: #323233;
}
.customPopCascade{
  .inputBox{
    border-radius: 7px;
    overflow: hidden;
    .down{
        font-size: 30px;
        color: #838282;;
      }
    }
}

.cascader-popup{
  .submit-button{
    position: absolute;
    right: 20px;
    top: 20px;
    padding: 15px 20px;
    color: #00aaff;
  }
}
</style>
